import pSeamlessScroll from "p-seamless-scroll";
import { useRef, useEffect, useState } from "react";
import "./SeamlessScroll.css";

export default function SeamlessScroll() {
  const verticalScrollRef = useRef(null);

  // 模拟实时数据
  const [scrollData, setScrollData] = useState([
    { id: 1, text: "🔔 系统消息：服务器运行状态正常", type: "success", time: "10:30" },
    { id: 2, text: "⚠️ 警告信息：CPU使用率达到80%", type: "warning", time: "10:31" },
    { id: 3, text: "💰 交易提醒：新订单 #12345 已创建", type: "info", time: "10:32" },
    { id: 4, text: "✅ 成功信息：数据备份已完成", type: "success", time: "10:33" },
    { id: 5, text: "📊 数据统计：今日访问量突破10万", type: "info", time: "10:34" },
    { id: 6, text: "🔧 维护通知：系统将在凌晨2点维护", type: "warning", time: "10:35" },
    { id: 7, text: "🎉 好消息：月度销售目标已达成", type: "success", time: "10:36" },
    { id: 8, text: "🔐 安全提醒：检测到异常登录尝试", type: "error", time: "10:37" },
  ]);

  // 初始化垂直滚动
  useEffect(() => {
    let verticalScroll = null;
    if (verticalScrollRef.current) {
      verticalScroll = new pSeamlessScroll(verticalScrollRef.current, {
        direction: "up", // 向上滚动
        speed: 30, // 滚动速度
        isHover: true, // 鼠标悬停时暂停
        singleHeight: 50, // 单行高度
        step: 1, // 步长
        loop: true
      });
    }

    return () => {
      if (verticalScroll && verticalScroll.destroy) {
        verticalScroll.destroy();
      }
    };
  }, [scrollData]);



  // 模拟实时数据更新
  // useEffect(() => {
  //   const interval = setInterval(() => {
  //     const messages = [
  //       "🚀 新功能上线：AI智能分析模块",
  //       "📈 性能提升：响应时间优化30%",
  //       "🎯 任务完成：自动化测试通过",
  //       "💡 优化建议：建议增加缓存策略",
  //       "🔄 同步完成：数据库同步成功",
  //     ];

  //     const newMessage = {
  //       id: Date.now(),
  //       text: messages[Math.floor(Math.random() * messages.length)],
  //       type: ["success", "info", "warning"][Math.floor(Math.random() * 3)],
  //       time: new Date().toLocaleTimeString().slice(0, 5)
  //     };

  //     setScrollData(prev => [...prev.slice(-7), newMessage]);
  //   }, 8000);

  //   return () => clearInterval(interval);
  // }, []);

  return (
    <div className="seamless-scroll-container" style={{height: "100%"}}>
      <div className="scroll-section">
        <h4>📋 实时消息通知</h4>
        <div className="vertical-scroll-wrapper" ref={verticalScrollRef}>
          <ul className="scroll-list">
            {scrollData.map((item, index) => (
              <li key={`${item.id}-${index}`} className={`scroll-item ${item.type}`}>
                <span className="message-time">{item.time}</span>
                <span className="message-text">{item.text}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

    </div>
  );
}
